<template>
  <router-view class="router-view" v-slot="{ Component }">
    <transition name="fade">
          <component :is="Component"></component>
    </transition>
  </router-view>
</template>

<style lang="stylus">
*
  margin 0
  padding 0
li
  list-style none
.fade-enter-active {
  position absolute
  animation:.6s ease move-in;
}
.fade-leave-active {
  position absolute
  animation: 0.6s  ease  move-out;
}
@keyframes move-in {
  0% {
   transform: translate3d(-100%,0,0);
  }
  100% {
   transform: translate3d(0,0,0);
  }
}
@keyframes move-out {
  0% {
   transform: translate3d(0,0,0);
  }
  100% {
   transform: translate3d(100%,0,0);
  }
}
</style>
